<template>
    <div>
        <div>
            <Top class="top" />
            <div class="da">
                <img :src="backs.img" alt="" class="img"></img>
                <p>{{ back.name }}</p>

            </div>
            <div class="CHAS">
                <p clas="CHAS"> 备注和标签</p>
                <van-icon name="arrow" class="van-icon-arrow" />
            </div>

            <div class="CHAS">
                <p> 朋友和权限</p>
                <van-icon name="arrow" class="van-icon-arrow" />
            </div>
            <div class="CHAS">
                <p> 朋友圈</p>
                <van-icon name="arrow" class="van-icon-arrow" />
            </div>
            <div class="CHAS">
                <p> 更多信息 </p>
                <van-icon name="arrow" class="van-icon-arrow" />
            </div>
            <div class="fa" @click="faxiao">
                发消息
            </div>
            <div class="fa">
                音频通话
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref , provide , inject} from "vue"
import Top from '../../components/top.vue'
import { useRoute , useRouter} from "vue-router"
const route = useRoute()
const router = useRouter()

const back = route.query
const backs = route.query

provide("backs",backs)
// console.log(back)
const res = inject("toUser")
provide("toUser",res)
const faxiao = () => {

      router.push({
        path: '/chat',
        query: back
      })
}
</script>

<style scoped>
.img {
    width: 50px;
    height: 50px;
}

.da {
    display: flex;
}

.CHAS {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    background-color: #ededed;
    margin-top: 20px;
}
.fa{
    height: 50px;
    background-color: #ededed;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

  
}
</style>